<template>
  <div class="service-question-detail">
    <nav-bar>
      <div class="center" slot="center">
        {{ subject[currentIndex] }}
      </div>
    </nav-bar>
    <scroll class="scroll">
      <p class="content" v-html="templateContent"></p>
    </scroll>
  </div>
</template>

<script>
import { renderMarkDown } from "common/render";

import Scroll from "components/common/betterScroll/Scroll";
import NavBar from "components/common/navbar/NavBar";
export default {
  data() {
    return {
      templateContent: "",
    };
  },
  props: {
    subject: {
      type: Array,
      default() {
        return [];
      },
    },
    content: {
      type: Array,
      default() {
        return [];
      },
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  components: {
    Scroll,
    NavBar,
  },
  created() {
    this.templateContent = renderMarkDown(this.content[this.currentIndex]);
  },
};
</script>
<style lang="less" scoped>
.service-question-detail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  .scroll {
    height: calc(100% - 44px);
    overflow: hidden;
  }
  .content {
    padding: 10px;
    font-size: 12px;
    line-height: 30px;
  }

  // 深度选择器,v-html中的样式使用普通选择器是无法进行修改的
  .content {
    /deep/ h1,
    /deep/ h2,
    /deep/ h3 {
      font-weight: normal;
    }
    /deep/ p img {
      width: 100%;
    }
  }
}
</style>